<template>
	<view class="container">
		<view class="wechat-app">
			<view class="header">
				<!-- #ifdef MP-WEIXIN -->
				<open-data class="avatar" type="userAvatarUrl"></open-data>
				<!-- #endif -->
			</view>
		</view>
		<view class="fetch-user" v-if="!bind">
			<view class="auth-title">申请获取以下权限</view>
			<view class="auth-subtitle">获得你的公开信息（昵称、头像等）</view>
			<view class="login-btn">
				<button class="button btn-normal" @click.stop="getUserProfile">授权登录</button>
			</view>
		</view>
		<view class="bind-phone" v-else>
			<view class="auth-title">申请获取以下权限</view>
			<view class="auth-subtitle">获得你的手机号</view>
			<view class="login-btn">
				<button class="button btn-normal" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">一键绑定手机号</button>
			</view>
			<view class="no-login-btn">
				<button class="button btn-normal" @click="onEmitSuccess">绑定其他手机号</button>
			</view>
		</view>
	</view>
</template>

<script>
	import store from '@/store'
	import LoginApi from '@/api/user/login'
	export default {
		data() {
			return {
				// 微信小程序登录凭证 (code)
				// 提交到后端，用于换取openid
				code: '',
				// 用户授权的信息
				userInfo: null,
				// 绑定手机号
				bind: false,
				// 授权信息
				oauth: null,
			}
		},
		methods: {

			// 获取code
			// https://developers.weixin.qq.com/miniprogram/dev/api/open-api/login/wx.login.html
			getCode() {
				return new Promise((resolve, reject) => {
					uni.login({
						provider: 'weixin',
						success: res => {
							console.log('code', res.code)
							resolve(res.code)
						},
						fail: reject
					})
				})
			},

			// 获取微信用户信息(新版)
			getUserProfile() {
				const app = this
				wx.canIUse('getUserProfile') && wx.getUserProfile({
					lang: 'zh_CN',
					desc: '获取用户相关信息',
					success({
						userInfo
					}) {
						console.log('用户同意了授权')
						console.log('userInfo：', userInfo)

						// 保存用户信息
						app.userInfo = userInfo

						// 授权成功事件
						app.onAuthSuccess(userInfo)
					},
					fail() {
						console.log('用户拒绝了授权')
					}
				})
			},

			// 授权成功事件
			// 这里分为两个逻辑:
			// 1.将code和userInfo提交到后端，如果存在该用户 则实现自动登录，无需再填写手机号
			// 2.如果不存在该用户, 则显示注册页面, 需填写手机号
			// 3.如果后端报错了, 则显示错误信息
			async onAuthSuccess(userInfo) {
				const app = this

				// 提交到后端，少了userInfo
				store.dispatch('MpWxLogin', {
					appId: this.$settings.appId,
					code: await app.getCode()
				}).then(result => {

					// 一键登录成功
					app.$app.toast('登录成功')

					// 跳转回原页面
					setTimeout(() => {
						app.onNavigateBack()
					}, 1000)
				}).catch(oauth => {
					console.log('abc：', oauth)
					// 如果授权成功，但是还没有注册
					if (oauth && oauth.openId) {
						app.bind = true;
						app.oauth = oauth;
					}

					// 授权错误
					else {
						// 一键登录成功
						app.$app.error('授权失败，请重新授权！')
					}
				})
			},

			// 获取手机号
			getPhoneNumber(e) {
				let detail = e.detail;
				console.log("获取手机号", detail)
				if (detail && detail.errMsg == 'getPhoneNumber:ok') {
					this.onBindSuccess(detail);
				} else {
					// 如果获取失败则让用户填写手机号
					this.onEmitSuccess();
				}
			},

			// 获取手机号成功
			onBindSuccess(detail) {
				let app = this;
				//1.todo，这个方法用来干嘛的？
				//2.讨论一下获取手机号的流程
				LoginApi.mpResolvePhone({
						sessionKey: app.oauth.sessionKey,
						encryptedData: detail.encryptedData,
						iv: detail.iv
					})
					.then(res => {
						if (res.success) {
							let login = {
								name: '', // app.userInfo.nickName, // 这个名称："微信用户"，所以不传， 后台判空处理
								headimg: '', // app.userInfo.avatarUrl, // 这个数据不能访问，所以不传
								phone: res.obj.purePhoneNumber,
								appId: app.oauth.appId,
								openId: app.oauth.openId,
								unionId: app.oauth.unionId || '',
								account: 'MpWeixin'
							}
							app.doLogin(login)
						} else {
							app.$app.error('授权失败，请重新授权！')
						}
					}).catch(() => {
						app.$app.error('授权失败，请重新授权！')
					})
			},

			// 执行登陆
			async doLogin(login) {
				console.log(login)
				let app = this;
				store.dispatch('Login', {
					login: login
				}).then(() => {
					app.onNavigateBack();
				}).catch(() => {
					app.$app.error('授权失败，请重新授权！')
				})
			},

			// 将oauth提交给父级
			// 这里要重新获取code, 因为上一次获取的code不能复用(会报错)
			async onEmitSuccess() {
				const app = this
				let login = {
					name: '', // app.userInfo.nickName, // 这个名称："微信用户"，所以不传， 后台判空处理
					headimg: '', // app.userInfo.avatarUrl, // 这个数据不能访问，所以不传
					phone: '',
					appId: app.oauth.appId,
					openId: app.oauth.openId,
					unionId: app.oauth.unionId || '',
					account: 'MpWeixin'
				}
				app.$emit('success', login)
			},

			/**
			 * 暂不登录
			 */
			handleCancel() {
				// 跳转回原页面
				this.onNavigateBack()
			},

			/**
			 * 授权成功 跳转回原页面
			 */
			onNavigateBack(delta = 1) {

				// 当前的页面
				let to = this.$store.getters.to;
				if (to && to.route) {
					this.$app.redirectTo(to.route, to.param)
				} else {
					this.$app.redirectTo('pages/index/index')
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 0 60rpx;
		font-size: 32rpx;
		background: #fff;
		min-height: 100vh;
	}

	.wechat-app {
		padding: 80rpx 0 48rpx;
		border-bottom: 1rpx solid #e3e3e3;
		margin-bottom: 72rpx;
		text-align: center;

		.header {
			width: 190rpx;
			height: 190rpx;
			border: 4rpx solid #fff;
			margin: 0 auto 0;
			border-radius: 50%;
			overflow: hidden;
			box-shadow: 2rpx 0 10rpx rgba(50, 50, 50, 0.3);
		}
	}

	.auth-title {
		color: #585858;
		font-size: 34rpx;
		margin-bottom: 40rpx;
	}

	.auth-subtitle {
		color: #888;
		margin-bottom: 88rpx;
		font-size: 28rpx;
	}

	.login-btn {
		padding: 0 20rpx;

		.button {
			height: 88rpx;
			line-height: 88rpx;
			background: #04be01;
			color: #fff;
			font-size: 30rpx;
			border-radius: 999rpx;
			text-align: center;
		}
	}


	.no-login-btn {
		margin-top: 20rpx;
		padding: 0 20rpx;

		.button {
			height: 88rpx;
			line-height: 88rpx;
			background: #dfdfdf;
			color: #fff;
			font-size: 30rpx;
			border-radius: 999rpx;
			text-align: center;
		}
	}
</style>